<template>
  <!-- 评论展示组件 -->
  <div class="comment-wraper">
    <column-divide :columnName="columnName"></column-divide>
    <div
      v-for="item in comments"
      :key="item.id"
      class="comment-item"
    >
      <div class="comment-item-top clearfix">
        <div class="phone">{{ item.comment_user_phone | truncatePhone }}</div>
        <div class="star">
          <img
            v-for="(value, key) in item.comment_star"
            :key="key + 'only'"
            src="../images/shixin.png"
            width="15"
            height="15"
          />
          <img
            v-for="(value, key) in 5 - item.comment_star"
            :key="key"
            src="../images/kongxin.png"
            width="15"
            height="15"
          />
        </div>
      </div>
      <div class="comment-item-bottom">{{ item.comment_content }}</div>
    </div>
  </div>
</template>
<script>
import columnDivide from '@/components/dx/column-divide';
export default {
  props: ['id'],
  components: {
    columnDivide,
  },
  data() {
    return {
      columnName: '最新评论',
      comments: [],
    };
  },
  created() {
    this.getComments();
  },
  methods: {
    async getComments() {
      const res = await this.$http.getComments(this.id);
      this.comments = [...this.comments, ...res.data.message];
    },
  },
  filters: {
    truncatePhone(phone) {
      return phone.substr(0, 3) + '****' + phone.substr(7, 4);
    },
  },
};
</script>
<style lang="scss" scoped>
.comment-wraper {
  padding-top: 15px;
  overflow: hidden;
  .comment-item {
    // height: 46px;
    margin: 3% 3%;
    .comment-item-top {
      height: 21px;
      .phone {
        font-size: 14px;
        float: left;
      }
      .star {
        float: right;
      }
    }
    .comment-item-bottom {
      padding: 7px 0 0 0;
      font-size: 12px;
      color: #b4b4b4;
    }
  }
}
</style>
